<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

    <input id="upUpdatePicture_cyt" hidden th:value="${productId.productId}">

    <table id="myDataTable"></table>

</body>

<script>

    $(function (){
        findImgData_cyt();
    })

    function findImgData_cyt(){
        var productId = $("#upUpdatePicture_cyt").val()
        $("#myDataTable").bootstrapTable({
            url:"findImgData_cyt?productId="+productId,
            columns:[
                {field:'pictureName',title:'图片',formatter:function (value,row){
                    return '<img src='+value+' width="100px" height="100px">'
                }},
                {field:'userRealName',title:'公司'},
                {field:'cz',title:'操作',formatter:function(value,row){
                    return "<input type='button' onclick='findMaterials_cyt(\""+row.commonId+"\",\""+row.userRealName+"\")' class='btn' value='查看材料单'>"
                }},
            ],

            pagination:true,//是否启用分页
            pageSize:3,//每页的记录行数（*）
            pageList:[3,6,9],//可供选择的每页的行数（*）
            showRefresh: false,//是否显示刷新按钮
            cardView: false,//是否显示详细视图
            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        })
    }

    function findMaterials_cyt(commonId,userRealName){
        location.href="toFindMaterials?commonId="+commonId+"&userRealName="+userRealName
    }

</script>

</html>